<template>
  <div id="car-type">
    <h2>
      车辆类型占比
    </h2>
    <div class="box">
      <span class="icon top-left-icon"></span>
      <span class="icon top-right-icon"></span>
      <span class="icon bottom-left-icon"></span>
      <span class="icon bottom-right-icon"></span>
      <div class="inner">
        <div id="type-chart">

        </div>
        <ul class="type-list">
         <!-- <li>
            <span><i class="color-tip" :style="{backgroundColor:colors[0]}"></i>出租车</span>
            <span>1113(辆)</span>
            <span>21.7%</span>
          </li>-->
          <li v-for="(item,index) in listData" :key="index">
            <span><i class="color-tip" :style="{backgroundColor:colors[index]}"></i>{{item.name}}</span>
            <span>{{item.num}}(辆)</span>
            <span>{{item.percent}}%</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
  import {mapGetters, mapMutations} from 'vuex'

  export default {
    name: 'CarType',
    data () {
      return {
        typeChart: null,
        colors:['#d5a635','rgb(77, 178, 47)','rgb(52, 160, 142)','#5e6bc7','rgb(205, 29, 23)','#00afd7']
      }
    },
    mounted(){
      this.getPieData();
    },
    computed: {
      ...mapGetters({
        "home_state": "home_state",
        listData: "homeChart/carTypeArr",
        formatHistoryTime: "homeChart/selectedTime"
      }),
    },
    methods: {
      chartInit(){
        this.typeChart = echarts.init(document.getElementById('type-chart'));
        let option = {
          title: {
            text: '',
            subtext: '',
            x: 'center'
          },
          tooltip: {
            trigger: 'item',
            // formatter: "{a} <br/>{b} : {c} ({d}%)"
            formatter: "{b} :({d}%)"
          },
          toolbox: {
            show: true,
            feature: {
              magicType: {
                show: false,
                type: ['pie', 'funnel']
              }
            }
          },
          calculable: true,
          series: [
            {
              name: '',
              type: 'pie',
              radius: '90%',
              center: ['45%', '50%'],
              data: this.listData.map((item, index) => {
                return {
                  value: item.percent,
                  name: item.name,
                  itemStyle: {
                    normal: {
                      color: this.colors[index]
                    }
                  }
                }
              }),
              label: {
                show: false,
                position:'inside',
                normal: {
                  show: false,
                  textStyle: {
                    color: 'rgba(255, 255, 255, 0.3)'
                  }
                }
              },
              emphasis:{
                show:false,
              },
              labelLine: {
                show: false,
                normal: {
                  lineStyle: {
                    color: 'rgba(255, 255, 255, 0.3)'
                  },
                  smooth: 0.2,
                  length: 10,
                  length2: 20
                }
              },
              itemStyle: {
                normal: {
                  color: '#c23531',
                  shadowBlur: 200,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              },

              animationType: 'scale',
              animationEasing: 'elasticOut',
              animationDelay: function (idx) {
                return Math.random() * 200;
              }
            }
          ]

        };
        this.typeChart.setOption(option);

      },

      getPieData: function() {
        this.$store.dispatch("homeChart/requsetCarTypeArr", this.home_state === "realtime" ? 0 : this.formatHistoryTime);
      }
    },
    watch: {
      home_state: function() {
        if (this.home_state === "realtime" || this.home_state === "history_hotMap") this.getPieData();
      },
      listData: function() {
        this.chartInit();
      },
      formatHistoryTime: function(newValue, oldValue) {
        this.getPieData();
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import "../../../static/common/common.scss";

  #car-type {
    width: 100%;
    height: 270px;
    box-sizing: border-box;
    margin-bottom: 10px;
    padding: 10px;
    h2 {
      @include linearTitle;
    }
    .box {
      position: relative;
      height: calc(100% - 34px);
      @include borderBlur;
      .icon {
        position: absolute;
        z-index: 10;
        width: 14px;
        height: 14px;
        &.top-left-icon {
          top: -2px;
          left: -2px;
          background: url("../../../static/images/index/top-left.png") no-repeat left top;
        }
        &.top-right-icon {
          top: -2px;
          right: -2px;
          background: url("../../../static/images/index/top-right.png") no-repeat right top;
        }
        &.bottom-left-icon {
          bottom: -2px;
          left: -2px;
          background: url("../../../static/images/index/left-bottom.png") no-repeat left bottom;
        }
        &.bottom-right-icon {
          bottom: -2px;
          right: -2px;
          background: url("../../../static/images/index/right-bottom.png") no-repeat right bottom;
        }
      }
      .inner {
        width: 100%;
        height: 100%;
        padding: 5px;
        box-sizing: border-box;
        #type-chart {
          width: 38%;
          height: 100%;
          display:inline-block;
          vertical-align: middle;
        }
        .type-list {
          width: 60%;
          height: 100%;
          display:inline-block;
          vertical-align: middle;
          list-style: none;
          padding: 0;
          margin: 0;
          li{
            font-size: $list-font;
            text-align: left;
            line-height: 30px;
            &:first-child{
              margin-top: 5px;
            }
            span{
              display: inline-block;
              vertical-align: middle;
              margin-right: 10px;
              &:first-child{
                min-width: 105px;
              }
              &:nth-child(2){
                min-width: 55px;
              }
              .color-tip{
                display: inline-block;
                vertical-align: middle;
                margin-right: 8px;
                width: 32px;
                height: 14px;
                border: 2px solid #2e4e5d;
                box-sizing: border-box;
              }
            }
          }
        }
      }
    }
  }
</style>
